<template>
  <div class="mainbg">
    <van-nav-bar
      v-if="info"
      :title="info.community"
      left-text
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 轮播图 -->
   <van-swipe
      class="my-swipe"
      :autoplay="3000"
      :height="200"
      indicator-color="white"
    >
<van-swipe-item v-for="(item, index) in info.houseImg" :key="index"
        ><img :src="`http://liufusong.top:8080${item}`" alt=""
      /></van-swipe-item>
    </van-swipe>
    <!-- 主体部分 -->
 <div class="maindes">
      <div class="maindestop">
        <div>{{ info.title }}</div>
        <div>
          <van-tag
            type="primary"
            size="medium"
            color="#e1f5f8"
            text-color="#4cc6df"
            v-for="(item, index) in info.tags"
            :key="index"
            >{{ item }}</van-tag
          >
        </div>
      </div>
      <div class="maindesmid">
        <div class="maindesmid-item">
          <span class="itemtop">{{ info.price }}/月</span>
          <span class="itemmain">租金</span>
        </div>
        <div class="maindesmid-item">
          <span class="itemtop">{{ info.roomType }}</span>
          <span class="itemmain">房型</span>
        </div>
        <div class="maindesmid-item">
          <span class="itemtop">{{ info.size }}平米</span>
          <span class="itemmain">面积</span>
        </div>
      </div>
      <div class="maindesbot">
        <div>装修:<span>精装</span></div>
        <div>
          朝向:<span>{{ info.oriented }}</span>
        </div>
        <div>
          楼层:<span>{{ info.floor }}</span>
        </div>
        <div>
          类型:<span>{{ info.community }}</span>
        </div>
      </div>
      <!-- 地图部分 -->
      <div  class="map"> 
        <baidu-map class="baidumap" :center="center" :zoom="15" v-if="mapShow">
        <bm-label
          :content="info.community"
          :position="center"
          :labelStyle="{
            color: '#ffffff',
            fontSize: '24px',
            backgroundColor: '#ee5d5b'
          }"
          title="Hover me"
        />
      </baidu-map>
      </div>


      <van-form class="support">
      <van-cell title="房屋配套"></van-cell>
      <van-grid :border="false" :column-num="5" :gutter="8" class="housebgc">
        <van-grid-item
          v-for="(item, index) in info.supporting"
          :key="index"
        >
          <template #icon>
            <i :class="`iconfont ${iconfontList[index]}`"></i>
          </template>
          <template #text>
            <div class="itemContent">{{ item }}</div>
          </template>
        </van-grid-item>
      </van-grid>
    </van-form>
    <div class="item housedes">
      <div class="titlt">房源概况</div>
      <div class="houseowner">
        <img src="http://liufusong.top:8080/img/avatar.png" alt="" />
        <div class="ownername">
          <p>王女士</p>
          <p>已认证房主</p>
        </div>
        <van-button size="small" plain type="primary">发消息</van-button>
      </div>
      <div class="descrip">{{ info.description }}</div>
    </div>
    <div class="likeTitle">猜你喜欢</div>
    <div class="item houselike">
      
      <HouseItem v-for="item in renderList" :key="item.houseCode" :item="item"></HouseItem>

    </div>
    </div>

    <!-- 底部区域 -->
    <footer>
      <van-button @click="getCollect" type="default" block
        ><van-rate
          :count="1"
          v-model="value"
         
        />收藏</van-button
      >
      <van-button type="default" block>在线咨询</van-button>
      <van-button type="primary" color="#21b97a" block>电话预约</van-button>
    </footer>
  </div>
</template>

<script>
import HouseItem from '@/components/house-item.vue'
import {
  getHouseInfo,
  getCollectHouse,
  subCollectList,
  addCollectList,
} from '@/api/house'
export default {
  name: 'Detail',
  props: {},
  components:{
     HouseItem
  },
  async created() {
    const id = this.$route.params.id
    const { body } = await getHouseInfo(id)
    console.log(body)
    this.info = body
    this.iconList=body.supporting
    this.center={lng:body.coord.longitude,lat:body.coord.latitude}
   this.mapShow=true
    const data = await getCollectHouse(body.houseCode)
    if (data.body.isFavorite) {
      this.value = 1
    } else {
      this.value = 0
    }
  },
  beforeCreate() {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      // duration: 0 //永不关闭
    })
  },
  data() {
    return {
      mapShow:false,
      center:{},
      info: null,
      flag: '',
      value: null,
      iconList:[],
       iconfontList:[
         'icon-shequhuodong', 'icon-bingxiang','icon-xiyiji','icon-xiyifang','icon-reshuiqi','icon-xiuxishi','icon-nuanqi','icon-kuandai','icon-yigui','icon-tianranqi'
       ],
        renderList: [
        {
          houseImg: '/img/message/1.png',
          title: '安贞西里 3室1厅',
          tags: ['随时看房'],
          price: 4500,
          desc: '三室/南 北/低楼层',
          houseCode: '3a6d3cf7-4428-012d'
        },
        {
          houseImg: '/img/message/2.png',
          title: '天居园 2室一厅',
          tags: ['近地铁'],
          price: 7200,
          desc: '四室/123/北/亮马水晶',
          houseCode: '802b12f6-8387-b7f9'
        },
        {
          houseImg: '/img/message/3.png',
          title: '角门甲4号院 1室1厅',
          tags: ['集中供暖'],
          price: 4300,
          desc: '三室/2/南/眉州路515弄',
          houseCode: '19b5cd59-aa7f-7a90'
        }
      ]
    }
  },
  methods: {
    async getCollect() {
      if (this.value) {
        await subCollectList(this.info.houseCode)
        this.$toast('已取消收藏')
        this.value = 0
      } else {
        await addCollectList(this.info.houseCode)
        this.$toast.success('已添加至收藏')
        this.value = 1
      }
    },
  },
}
</script>

<style scoped lang="less">
footer {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  flex-grow: 1;
}
.mainbg {
  background-color: #eaeaea;
  .item {
    background-color: #fff;
    padding: 0 20px;
    margin-top: 10px;
  }
  .housedes {
    min-height: 200px;
    .titlt {
      padding: 10px 0;
      font-weight: 600;
      border-bottom: 1px solid #ccc;
    }
    .descrip {
      font-size: 15px;
      line-height: 22px;
      padding: 10px 0;
    }
    .houseowner {
      position: relative;
      display: flex;
      align-items: center;
      height: 62px;
      padding-top: 10px;
      position: relative;
      img {
        width: 52px;
        height: 52px;
      }
      .ownername {
        font-size: 12px;
        margin-left: 15px;
      }
      .van-button {
        position: absolute;
        right: 0;
      }
    }
  }
  .houselike {
    height: 300px;
    padding: 0;
    .likeTitle {
      border-bottom: 1px solid #ccc;
      margin: 0 12px;
      padding: 12px 0;
      font-size: 14px;
      font-weight: 600;
    }
    margin-bottom: 150px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #ccc;
    img{
      width: 100%;
    }
  }
  .maindes {
    height: 300px;
    background-color: #fff;
    padding: 0 20px;
    .maindestop {
      display: flex;
      height: 100px;
      border-bottom: 1px solid #f1f1f1;
      flex-direction: column;
      div {
        flex: 1;
        line-height: 50px;
      }
    }
    .maindesmid {
      display: flex;
      height: 100px;
      border-bottom: 1px solid #f1f1f1;
      .maindesmid-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .itemtop {
          color: red;
          font-size: 18px;
          font-weight: bold;
        }
        .itemmain {
          color: #ccc;
        }
      }
    }
    .maindesbot {
      padding-top: 20px;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      color: #999;
      div {
        width: 150px;
        height: 30px;
        span {
          color: #000;
          font-size: 14px;
        }
      }
    }
  }
  .map {
    margin-top: 10px;
    background-color: #fff;
    height: 150px;
    .baidumap {
      height: 100%;
    }
  }
  .support {
    background-color: #fff;
    i {
      font-size: 24px;
    }
  }
  .bottom {
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0;
    display: flex;
    // border-top: 2px solid #ccc;
    div {
      flex: 1;
      border: solid 1px #ccc;
      text-align: center;
      background-color: white;
      line-height: 50px;
      color: #333;
    }
   
  }
  .housebgc{
     text-align: center;
  }
  .itemContent{
    width: 50px;
  }
}

</style>
